@keyframes flip{
   25%{ transform: perspective(100px) rotateX(180deg) rotateY(0);}
   50%{ transform: perspective(100px) rotateX(180deg) rotateY(180deg);}
   75%{ transform: perspective(100px) rotateX(0) rotateY(180deg);}
   100%{ transform: perspective(100px) rotateX(0) rotateY(0);}
}
@keyframes rotate{
   0%{ transform: rotate(0deg);}
   100%{ transform: rotate(360deg);}
}
@keyframes bounce{
   0%, 100% { transform: scale(0.0);  }
  50% { transform: scale(1.0);}
}
@keyframes zoom{
   0% { transform: scale(0.0);opacity: 1;  }
  100% { transform: scale(1.0);opacity: 0}
}
.k-loading-warp{
   position: fixed;
   z-index: 1001;
   left: 0;
   top:0;
   bottom: 0;
   right: 0;
   background: rgba(255, 255, 255, 0.6);
   .k-loading-line{
      height: 100%;
      transition:width .2s ease-in-out;
      background-color: @main;
   }
   .k-loading-line-error{
    background-color: @danger !important;
   }
   .k-loading-inner{
      margin: 0 auto;
      position: relative;
      text-align: center;
      top: 50%;
      margin-top: -17.5px;
   } 
   .k-loading-animate{
      width: 35px;
      height: 35px;
      margin: 0 auto;
   }
   .k-loading-animate-flip{
      background-color:@main;
      animation: flip 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
   }
   .k-loading-animate-bounce{
      position: relative;
      &::before,&::after{
         content: '';
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background-color: @main;
         opacity: 0.6;
         position: absolute;
         top: 0;
         left: 0;
         animation: bounce 2.0s infinite ease-in-out;
      }
      &::before{
         animation-delay: -1.0s;
      }
   
   }
   .k-loading-animate-zoom{
      position: relative;
      &::before,&::after{
         content: '';
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background: @main;
         opacity: 0.6;
         position: absolute;
         top: 0;
         left: 0;
         animation: zoom 2s 0s cubic-bezier(.09,.57,.49,.9) infinite;
         // animation: zoom 2.0s infinite ease-in-out;
      }
      &::before{
         animation-delay: -1.0s;
      }
   
   }
   .k-loading-animate-rotate{
      position: relative;
      border:5px solid tint(@main, 80%);
      border-radius: 50%;
      &::before{
         content:'';
         width: 100%;
         height: 100%;
         position:absolute;
         left: -5px;
         top: -5px;
         border-radius: 50%;
         border: 5px solid transparent;
         border-top-color: @main;
         animation: rotate .5s  infinite linear;
      }
   }
}
.k-load-loop{
  -webkit-animation: loadloop 1s linear infinite;
    animation: loadloop 1s linear infinite
}
